<template>
    <div class = "cinema">
        <div class="cinema-head">
            <router-link tag="div" to="/city" class="return">{{city}}</router-link><h5>影院</h5><router-link  tag="div"  to="/cinemaSearch" class="serach" >搜索</router-link>
        </div>
        <div class="recent">
            <div class="all-city" :class="{'active': isMask}" @click="isMask = isMask ? false : true">{{areaNow}}</div>
            <div class="zuijin">最近去过</div>
        </div>
        <div class="ciname-list">
            <ul>
                <router-link tag="li" :to="{path: '/cinemaDetail', query: { cinemaId: item.cinemaId}}" v-for="(item,index) in areacinema" :key="index">
                    <div class="left">
                        <p class="cinema-name">{{item.name}}</p>
                        <p class="cinema-address">{{item.address}}</p>
                    </div>
                    <div class="right">
                        <div class="cinema-price">
                            <template v-if="item.lowPrice">￥{{item.lowPrice/100}}起</template>
                        </div>
                        <div class="cinema-distance">
                            <template>{{item.Distance > 1 ? item.Distance.toFixed(2) + 'km' : (item.Distance ? item.Distance.toFixed(2)*100 + 'm' : '距离未知')}}</template>
                        </div>
                    </div>
                </router-link>
            </ul>
        </div>
        <div class="area-select" v-show="isMask">
            <div class="area-list">
              <ul class="clearfix
              ">
                  <li v-for="(item, index) in cityArea" @click="changeAndHide(index)" :class="{'active': areaNow === cityArea[index]}" :key="index">
                    {{item}}
                  </li>
              </ul>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import {mapState} from 'vuex'
export default {
  name: 'cinema',
  data () {
    return {
      cityArea: [
        '全城', '福田区', '南山区', '龙华区', '龙岗区', '宝安区', '罗湖区', '盐田区', '坪山区'
      ],
      isMask: false,
      areaNow: '',
      areacinema: null,
      classCinema: []
    }
  },
  created () {
    var _this = this
    axios.get('/cinema/list').then(function (res) {
      console.log(res)
      localStorage.setItem('cinema', JSON.stringify(res.data.data))
      _this.$store.commit('changeCinema', res.data.data)
    })
    this.areaClass() // 对我们的数据进行分类
    this.areacinema = this.cinema // 页面上渲染的是所有影院的信息
    this.areaNow = this.cityArea[0] // 默认选择的是全城（默认显示全城的数据）
  },
  computed: {
    ...mapState([
      'cinema',
      'city'
    ])
  },
  watch: {
    /**
     * 监听我们所筛选的城市变化
     *  */
    areaNow (newVal, oldVal) {
      if (newVal !== '全城') { // 如果不是全城，就分类显示数据
        this.classCinema.forEach((item, index) => {
          if (item.areaname === newVal) { // 遍历我们影院的数据，找到地区和我们选择的进行匹配
            this.areacinema = this.classCinema[index]['list'] // 将我们影院信息赋值给我们页面上渲染的列表数据
          }
        })
      } else { // 如果是全城的话，直接使用所有影院的数据（下面的cinema是从store中获取的）
        this.areacinema = this.cinema
      }
    }
  },
  methods: {
    /**
     * 改变现在显示的区并且隐藏我们的遮罩层
     * parmas {Number} index  我们点击的是哪一个
     *  */
    changeAndHide (index) {
      this.areaNow = this.cityArea[index]
      this.isMask = false
    },
    /**
     * 进行区的筛选
     */
    areaClass () {
      var has = {}
      var index = 0
      var res = []
      this.cinema.forEach(item => {
        var areaname = item.districtName
        // 如果已经有这个区了
        if (has[areaname]) {
          res[has[areaname] - 1]['list'].push(item) // 直接将我们的影院信息添加到对应区的数组list中
        } else { // 如果没有这个区
          has[areaname] = ++index
          res.push({
            areaname: areaname, // 保存这个区的名字
            list: [item] // 保存这个区的影院信息
          })
        }
      })
      this.classCinema = res // 将我们区域筛选之后的结果保存到data中
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/common/px2rem.scss';
.cinema{
    flex: 1;
    display: flex;
    flex-direction: column;
    .cinema-head{
        display: flex;
        font-size: px2rem(20);
        padding: px2rem(15) px2rem(15);
        border-bottom: 1px solid #333;
        flex-shrink: 0;
        h5{
            font-weight: 400;
            font-size: px2rem(20);
            flex: 1;
            text-align: center;
        }
        .return{
            font-size: px2rem(20);
            padding: px2rem(5);
        }
        .search{
            font-size: px2rem(20);
            width: px2rem(50);
        }
    }
    .recent{
        display: flex;
        font-size: px2rem(18);
        padding: px2rem(10) 0;
        border-bottom: 1px solid #ccc;
        flex-shrink: 0;
        .all-city.active{
            color:#ff5f16;
        }
        .zuijin{
            border-left: 1px solid #ccc;
        }
        div{
            flex: 1;
            height: px2rem(29);
            line-height: px2rem(29);
            text-align: center;
        }
    }
    .ciname-list{
        overflow-y: auto;
        display: flex;
        ul{
          width: 100%;
        }
        li{
            width: px2rem(355);
            padding: px2rem(10) px2rem(10);
            display: flex;
            justify-content: space-between;
        }
        .left{
          width: px2rem(256);
          .cinema-name{
              font-size: px2rem(15);
              color: #191a1b;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
          }
          .cinema-address{
              font-size: px2rem(12);
              color: #797d82;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
          }
        }
        .right{
            .cinema-price{
                font-size: px2rem(15);
                color: #ff5f16;
                height: px2rem(20);
                text-align: center;
            }
            .cinema-distance{
                color: #797d82;
                font-size: px2rem(12);
                text-align: center;
            }
        }
    }
    .area-select{
        position: fixed;
        top: px2rem(115);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .6);
        .area-list{
            width: 100%;
            background-color: #fff;
            display: flex;
            ul{
                padding-left: px2rem(3);
            }
            li{
                float: left;
                width: px2rem(82);
                height: px2rem(30);
                border: 1px solid rgba(210,214,220,.5);
                text-align: center;
                line-height: px2rem(30);
                font-size: px2rem(12);
                color: #797d82;
                margin: {
                    right: px2rem(10);
                    bottom: px2rem(20);
                }
            }
            li.active{
                color: #ff5f16;
                border-color: #ff5f16;
            }
        }
    }
}
</style>
